<template>
  <div>
    <div class="flex-start m-b-30">
      <el-button
        icon="el-icon-back"
        type="primary"
        plain
        round
        size="small"
        @click="back"
      >
        返回
      </el-button>
    </div>
    <el-tabs class="m-t-10" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="基本信息" name="baseInfo">
        <contract-customer-add-content :id="id" class="m-t-30" />
      </el-tab-pane>
      <el-tab-pane label="加注卡" name="addCard">
        <contract-customer-add-card-tab :id="id" class="m-t-30" is-edit />
      </el-tab-pane>
      <el-tab-pane label="车辆信息" name="VehicleInformation">
        <contract-customer-detail-vehicle-tab
          :id="id"
          v-if="activeName === 'VehicleInformation'"
          class="m-t-10"
        />
      </el-tab-pane>
      <el-tab-pane label="司机信息" name="driverInformation">
        <contract-customer-detail-driver-tab
          :id="id"
          v-if="activeName === 'driverInformation'"
          class="m-t-10"
        />
      </el-tab-pane>
      <el-tab-pane label="临时额度" name="shortCredit">
        <contract-customer-credit-tab
          :id="id"
          v-if="activeName === 'shortCredit'"
          class="m-t-10"
        ></contract-customer-credit-tab>
      </el-tab-pane>
      <el-tab-pane label="加注记录" name="fillingRecord">
        <contract-customer-detail-filling-record-tab
          :id="id"
          v-if="activeName === 'fillingRecord'"
          class="m-t-10"
        />
      </el-tab-pane>
      <el-tab-pane label="可用加注机" name="fillingMachine">
        <contract-customer-detail-filling-machine-tab
          :id="id"
          v-if="activeName === 'fillingMachine'"
          class="m-t-10"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import ContractCustomerAddContent from "./contract-customer-add-content";
import ContractCustomerDetailVehicleTab from "./contract-customer-detail-vehicle-tab";
import ContractCustomerDetailDriverTab from "./contract-customer-detail-driver-tab";
import ContractCustomerDetailFillingRecordTab from "./contract-customer-detail-filling-record-tab";
import ContractCustomerDetailFillingMachineTab from "./contract-customer-detail-filling-machine-tab";
import ContractCustomerAddCardTab from "./contract-customer-add-card-tab.vue";
import ContractCustomerCreditTab from "@/views/customer/compontents/contract-customer-credit-tab.vue";
export default {
  name: "contract-customer-detail-content",
  components: {
    ContractCustomerCreditTab,
    ContractCustomerDetailFillingRecordTab,
    ContractCustomerDetailDriverTab,
    ContractCustomerDetailVehicleTab,
    ContractCustomerAddContent,
    ContractCustomerDetailFillingMachineTab,
    ContractCustomerAddCardTab,
  },
  props: ["id"],
  data() {
    return {
      activeName: "baseInfo",
    };
  },
  methods: {
    back() {
      this.$emit("back");
    },
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped></style>
